import React, { Component } from 'react';
// import './app.css';
import { Form, Input, Button, message, Select, Row, Col, Radio } from 'antd';
import { Icon } from '@ant-design/compatible';
import { NavLink, Route, withRouter } from 'react-router-dom';
import 'whatwg-fetch';


class DinReocord extends React.Component {

    state = {
        userInfo: {}
    }

    componentDidMount() {
        this.handleBind();
    }

    handleBind = () => {
        const userId = localStorage.getItem('loginName');
        const url = `http://aishu.ncqsjg.cn/api/v1/user/${userId}`;
        fetch(url, {
            method: 'get',
            mode: 'cors',
            // headers: {
            //     'Content-Type': 'application/json'
            // },
            // body: JSON.stringify(data)
        }).then((response) => {
            console.log(response);
            return response.json();
        }).then((body) => {
            console.log(body);
            this.setState({
                userInfo: body
            });
        })
    }

    bindUser = () => {
        const userId = this.state.userInfo.user_id;
        const url = `http://aishu.ncqsjg.cn/api/v1/wechat/${userId}`;
        fetch(url, {
            method: 'post',
            mode: 'cors',
            headers: {
                'Content-Type': 'application/json'
            }
            // body: JSON.stringify(userId)
        }).then((response) => {
            console.log(response);
            return response.json();
        }).then((body) => {
            console.log(body);
            alert(`发送邮件成功：请及时绑定`)
            // this.setState({
            //     userInfo: body
            // });
        })
    }

    render() {
        console.log(this.state.userInfo);
        const { name, isOrder, orderTime, position, orderType, weChartID } = this.state.userInfo;
        return (
            <div>
                <Button disabled={weChartID === '' ? false : true} onClick={this.bindUser}>点击绑定</Button><br />
                <span>用户名：</span> <span>{name}</span><br />
                <span>是否点餐：</span> <span>{isOrder === 1 ? '已点餐' : '未点餐'}</span><br />
                <span>点餐时间：</span> <span>{orderTime}</span><br />
                <span>点餐地点：</span> <span>{position}</span><br />
                <span>用餐类型：</span> <span>{orderType}</span>

            </div>
        )
    }
}

export default withRouter(DinReocord);